<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="/js/index.js"></script>
</head>

<body>
    <div class="top">
        <div class="top-content">
            <div class="left">
            <a href="#">小米网</a>
            <a href="#">MIUI</a>
            <a href="#">米聊</a>
            <a href="#">游戏</a>
            <a href="#">多看阅读</a>
            <a href="#">云服务</a>
            <a href="#">小米网移动版</a>
            <a href="#">Sclect region</a>
            <a href="#">米粉节答疑</a>
        </div>
            <div class="right">
                <a class="top-right1" href="#">注册</a>
                <span>|</span>
                <a class="top-right2" href="#">登陆</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="nav">
            <img src="images/logo.png" alt="">
            <div class="time">
                <img src="images/clock.png" alt="">
                <span>4月14日开放购买</span>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索你需要的商品">
                <div class="choice"> <span><a href="#">小米手环</a></span>
                    <span><a href="#">耳机音箱</a></span>
                    <span><a href="#">保护壳</a></span>
                </div>
                <button></button>
            </div>
            <button class="shop-car">购物车</button>
        </div>
        <div class="content">
            <div class="goods">
                <div class="all-goods">
                    <p>全部商品分类</p>
                </div>
                <ul class="buy-phone">
                    <li>购买手机</li>
                    <li>
                        <a href="#">小米Noto</a>
                        <a href="#">小米4</a>
                        <a href="#">红米</a>
                        <a href="#">红米Noto</a>
                    </li>

                </ul>
                <ul class="buy-tv">
                    <li>购买电视与平板</li>
                    <li>
                        <a href="#">小米电视</a>
                        <a href="#">小米盒子</a>
                        <a href="#">小米平板</a>
                    </li>

                </ul>
                <ul class="buy-router">
                    <li>路由器与智能硬件</li>
                    <li>
                        <a href="#">路由器</a>
                        <a href="#">体重秤</a>
                        <a href="#">净化器与滤芯</a>
                    </li>

                </ul>
                <ul class="buy-chaxianban">
                    <li>插线板、移动电源与电池</li>
                    <li>
                        <a href="#">小米移动电源</a>
                        <a href="#">电池</a>
                        <a href="#">充电器</a>
                    </li>

                </ul>
                <ul>
                    <li>耳机音箱与储存卡</li>
                    <li><a href="#">小米头戴式耳机</a>
                        <a href="#">小米活塞耳机</a>
                    </li>

                </ul>
                <ul>
                    <li>保护套与贴膜</li>
                    <li>
                        <a href="#">保护套/保护壳</a>
                        <a href="#">贴膜</a>
                        <a href="#">防尘塞</a>
                    </li>

                </ul>
                <ul>
                    <li>后盖与个性化配件</li>
                    <li><a href="#">米键</a>
                        <a href="#">后盖</a>
                        <a href="#">贴纸</a>
                        <a href="#">手机支架</a>
                    </li>

                </ul>
                <ul>
                    <li>小米生活方式</li>
                    <li>
                        <a href="#">服装</a>
                        <a href="#">米兔</a>
                        <a href="#">背包</a>
                        <a href="#">生活周边</a>
                    </li>

                </ul>
            </div>
            <div class="menu">
                <div class="menu-nav">
                    <a href="#">首页</a>
                    <a href="#">小米手机</a>
                    <a href="#">红米</a>
                    <a href="#">小米平板</a>
                    <a href="#">小米电视</a>
                    <a href="#">盒子</a>
                    <a href="#">路由器</a>
                    <a href="#">合约机</a>
                    <a href="#">服务</a>
                    <a href="#">社区</a>
                </div>
                <div class="banner">
                    <div class="banner-content">
                        <img src="images/banner5.png" alt="">
                        <img src="images/banner4.png" alt="">
                        <img src="images/banner3.png" alt="">
                        <img src="images/banner2.png" alt="">
                        <img src="images/banner1.png" alt="">
                    </div>
                    <div class="all-icons">
                        <span class="active">
                            <p>1</p>
                        </span>
                        <span>
                            <p>2</p>
                        </span>
                        <span>
                            <p>3</p>
                        </span>
                        <span>
                            <p>4</p>
                        </span>
                        <span>
                            <p>5</p>
                        </span>
                    </div>
                </div>
                <div class="menu-bottom">
                    <img src="images/01.png" alt="">
                    <img src="images/02.png" alt="">
                    <img class="xiaomi-Noto" src="images/03.png" alt="">
                </div>
            </div>
        </div>
        <div class="danpin">
            <p>小米明星单品 <span>根据机型选配件</span></p>
            <img class="prev" src="images/05.png" alt="">
            <img class="next" src="images/06.png" alt="">
        </div>
        <div class="mingxingdanpin">

            <div class="danpin1">
                <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt="">
                <h4>小米智能插座</h4>
                <p>让普通家电变得智能</p>
            </div>
            <div class="danpin2">
                <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt="">
                <h4>小米空气净化器</h4>
                <p>高性能智能空气净化器立即预约</p>
            </div>
            <div class="danpin3">
                <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt="">
                <h4>小米活塞耳机简装版</h4>
                <p>好声音源自活塞式音腔，延续经典设计</p>
            </div>
            <div class="danpin4">
                <img src="images/aa.jpg" alt="">
                <h4>小米路由器</h4>
                <p>顶级双屏幕AC智能路由器，内置1TB大硬盘</p>

            </div>
        </div>
        <div class="new-goods">
            <p>新品上架</p>
            <a href="#">更多></a>
            <div class="goods-wrap">
                <div class="goods-left">
                    <div class="yinxiang">
                        <img src="images/fanghezi0407xiao.jpg" alt="">
                    </div>
                    <div class="shouhuan">
                        <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="">
                        <p>小米手环<br>79元</p>
                    </div>
                    <div class="yaoshikou">
                        <img src="images/T1TfAgB4KT1RXrhCrK!220x220.jpg" alt="">
                        <p>5周年米兔钥匙扣<br>9.9元</p>
                    </div>
                    <div class="Q8erji">
                        <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="">
                        <p>QCY派Q8蓝牙耳机<br>59.9元</p>
                    </div>
                    <div class="yifu">
                        <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="">
                        <p>小米T恤路标MILOGO<br>39元</p>
                    </div>
                    <div class="hougai">
                        <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="">\
                        <p>小米4实木后盖<br>69元</p>
                    </div>
                    <div class="baohuke">
                        <img src="images/baohuke.png" alt="">
                        <p>小米NOTO超薄保护壳<br>49元</p>
                    </div>
                    <div class="zipaigan">
                        <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="">
                        <p>小米自拍杆<br>49元</p>
                    </div>
                    <div class="CL31erji">
                        <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt="">
                        <p>先锋CL31系列耳式耳机<br>99元</p>
                    </div>
                </div>
                <div class="goods-right">
                    <div class="cunchuka">
                        <p class="tejia">特价商品</p>
                        <ul>
                            <li>
                                <h4>SanDisk32GB存储卡</h4>
                            </li>
                            <li class="price">79元<span>109元</span></li>
                            <li>还有更多特价商品</li>
                            <img src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
                        </ul>
                    </div>
                    <div class="taocan">
                        <ul>
                            <li>
                                <h4>特惠配件套餐</h4>
                            </li>
                            <li>手机必备配件组合购买</li>
                            <li>实惠更优惠</li>
                        </ul>
                        <img src="images/channel-list-cool.jpg" alt="">
                    </div>
                    <div class="kuwan">
                        <ul>
                            <li>
                                <h4>我爱酷玩</h4>
                            </li>
                            <li>邂逅酷炫的电子产品</li>
                            <li>结交趣味相投的朋友</li>
                        </ul>
                        <img src="images/channel-list-new.jpg" alt="">
                    </div>
                
                    <p class="router first">企业用户采购通道<span>></span></p>
                    <p class="router">小米手机防伪查询<span>></span></p>
                    <p class="router">小米手机官翻版<span>></span></p>
                    <p class="router">小米路由器官翻版<span>></span></p>
                    <p class="router">米粉红包<span>></span></p>
                    <p class="chongzhi">话费充值</p>
                    <input type="text" placeholder="请输入手机号">
                    <select>
                        <option value="100元">100元</option>
                        <option value="充满">充满</option>
                    </select>
                    <p class="shifu">实付价格98.4元起</p>
                    <button>立刻充值</button>
                
                </div>
            </div>
        </div>
    </div>
    <div class="foot">
        <div class="footer">
            <div class="xiuli">
            <img src="images/10.png" alt="">
            <p>1小时快修服务</p>
            </div>
            <div class="tuihuo">
            <img src="images/11.png" alt="">
            <p>7天无理由退货</p>
            </div>
            <div class="huanhuo">
            <img src="images/12.png" alt="">
            <p>15天免费换货</p>
            </div>
            <div class="baoyou">
            <img src="images/13.png" alt="">
            <p>满150元包邮</p>
            </div>
            <div class="wangdian">
            <img src="images/14.png" alt="">
            <p>520余家售后网点</p>
            </div>
        </div>
        <div class="xiaomizhijia">
            <div class="ad">
            <ul class="bangzhu">
                <li style="font-size: 17px">帮助中心</li>
                <li>购物指南</li>
                <li>支付方式</li>
                <li>配送方式</li>
            </ul>
            <ul class="fuwu">
                <li style="font-size: 17px">服务支持</li>
                <li>售后政策</li>
                <li>自助服务</li>
                <li>相关下载</li>
            </ul>
            <ul class="home">
                <li style="font-size: 17px">小米之家</li>
                <li>小米之家</li>
                <li>服务网店</li>
                <li class="yuyue">预约亲临到店服务</li>
            </ul>
            <ul class="about">
                <li style="font-size: 17px">关于小米</li>
                <li>了解小米</li>
                <li>加入小米</li>
                <li>联系我们</li>
            </ul>
            <ul class="guanzhu">
                <li style="font-size: 17px">关注我们</li>
                <li>新浪微博</li>
                <li>小米部落</li>
                <li>官方微信</li>
            </ul>
            <ul class="rexian">
                <li style="font-size: 24px">400-100-5678</li>
                <li style="font-size: 14px">周一至周日8:00-18:00</li>
                <li style="font-size: 14px">(仅收市话费)</li>
                <button>24小时在线客服</button>
            </ul>
            </div>
        </div>
        <div class="wangzhan">
            <a href="#" style="font-size: 12px">小米旗下网站</a>
            <span>:</span>
            <a href="#" style="font-size: 12px">小米网</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">MIUI</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">米聊</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">多看书城</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">小米路由器</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">繁体香港</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">繁体台湾</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">English</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">小米后院</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">小米天猫店</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">小米淘宝直营店</a>
            <span>|</span>
            <a href="#" style="font-size: 12px">小米网盟</a>
        </div>
        <div class="beianhao">
            <p style="font-size: 12px">©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号</p>
        </div>
        <div class="renzheng">
            <img src="images/16.png" alt="">
        </div>
            <select class="yuyanqiehuan">
                <option value="简体中文">简体中文</option>
                <option value="繁体中文">繁体中文</option>
                <option value="English">English</option>
            </select>
    </div>
</body>

</html>